<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>轮播图</title>
    <style>
    *{
        box-sizing: border-box;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .outer{
        width: 596px;
        height: 260px;
        margin: 50px auto;
        position: relative;
        border: 1px solid lightgray;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        /*overflow: hidden;*/
    }
    
    .top{
        background-image: url(img/btn_cartoon.gif);
        width: 596px;
        height: 35px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        position: relative;
        
    }
    .top li{
      background-image: url(img/btn_cartoon.gif);
      /*background-repeat: repeat-y;*/
       height: 30px;
       width: 100px;
    }
    .top .first{
       background-position: 0 -100px;
    }
    .top .second{
       background-position: 0 -305px;
       position: absolute;
       cursor: pointer;
    }
    .top .second.cur{
        background-position: 0 -205px;
    }
    .top .second.one{
       top: 0;
       left: 95px; 
    }
    .top .second.two{
       top: 0;
       left: 105px; 
    }
    .top .second.three{
       top: 0;
       left: 115px; 
    }
    .top .second.four{
       top: 0;
       left: 125px; 
    }

    .top .third{
         position: absolute;
         height: 22px;
         cursor: pointer;
    }
    .top .third.left{
      background-position: 0 -400px; 
     
      top: 5px;
      left: 150px; 
      width: 31px;
    }
    .top .third.right{
      background-position: -30px -400px; 
      top: 5px;
      left: 181px; 
      width: 31px;
    }
    .top .fourth{
         background-position: -50px  -1px; 
         width: 50px;
         height: 35px;
        position: absolute;
        font-size: 13px;
        top: 0px;
        right:5px;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        color: steelblue;
        font-weight: bold;
    }
    .outer {
     overflow: hidden;
    }
    .list {
        position: relative;
      
    }

   .list li {
        /*margin: 30px;*/
        position: absolute;
        top: 0;
        left: 0;
        width: 2400px;
        height: 200px;  
    }
    
    .list li .inner{
        padding: 20px 29px;
        width: 596px;
        float: left;
    }
    
    .list li.current{
        display: block;
    }
    
    .inner div{
        float: left;
        margin-left: 5px;
    }
    .inner div p{
        font-size: 13px;
    }
    .inner div p:nth-of-type(1){
        color: steelblue;
        cursor: pointer;
    }
    
    </style>
</head>

<body>
    <div class="outer">
        <ul class="top">
            <li class="first"></li>
            <li class="second one cur"></li>
            <li class="second two "></li>
            <li class="second three"></li>
            <li class="second four"></li>
            <li class="third left"></li>
            <li class="third right"></li>
            <li class="fourth">更多>></li>
        </ul>
        <ul class="list">
            <li class="one">
                <div class="inner">
                    <div><img src="img/01.jpg" alt=""><p>海贼王</p><p>播放:28,276</p></div>
                    <div><img src="img/01.jpg" alt=""><p>海贼王</p><p>播放:28,276</p></div>
                    <div><img src="img/01.jpg" alt=""><p>海贼王</p><p>播放:28,276</p></div>
                    <div><img src="img/01.jpg" alt=""><p>海贼王</p><p>播放:28,276</p></div>
                </div>
          

                <div class="inner">
                    <div><img src="img/02.jpg" alt=""><p>哆啦A梦</p><p>播放:33,274</p></div>
                    <div><img src="img/02.jpg" alt=""><p>哆啦A梦</p><p>播放:33,274</p></div>
                    <div><img src="img/02.jpg" alt=""><p>哆啦A梦</p><p>播放:33,274</p></div>
                    <div><img src="img/02.jpg" alt=""><p>哆啦A梦</p><p>播放:33,274</p></div>
                </div>
            
            
                <div class="inner">
                    <div><img src="img/03.jpg" alt=""><p>火影忍者</p><p>播放:28,285</p></div>
                    <div><img src="img/03.jpg" alt=""><p>火影忍者</p><p>播放:28,285</p></div>
                    <div><img src="img/03.jpg" alt=""><p>火影忍者</p><p>播放:28,285</p></div>
                    <div><img src="img/03.jpg" alt=""><p>火影忍者</p><p>播放:28,285</p></div>
                </div>
           

                <div class="inner">
                    <div><img src="img/04.jpg" alt=""><p>龙珠</p><p>播放:57,965</p></div>
                    <div><img src="img/04.jpg" alt=""><p>龙珠</p><p>播放:57,965</p></div>
                    <div><img src="img/04.jpg" alt=""><p>龙珠</p><p>播放:57,965</p></div>
                    <div><img src="img/04.jpg" alt=""><p>龙珠</p> <p>播放:57,965</p></div>
                </div>
            </li>
        </ul>

    </div>
</body>

</html>
<script>

var current=0;

    $('.third.left').click(function(){
        if(current>0){
            current--;
        }else{
            current = $('.list .inner').length-1;
        }
        $('.second').eq(current).addClass('cur')
        .siblings().removeClass('cur');


        console.log('1111');
        $('.list .one').stop().animate({
            
            left:-596*current
        });
        

    });
    $('.third.right').click(function(){
        console.log('222');
        if(current<$('.list .inner').length-1){
            current++;
        }else{
            current=0;
        }
        
        $('.list .one').stop().animate({
            
            left:-596*current
        });
        $('.second').eq(current).addClass('cur')
        .siblings().removeClass('cur');
    });
</script>